<!--  -->
<template>

    <FullScreenBorder class="background">
        <starBackground></starBackground>
        <dv-loading v-if="IsLoading == 1">Loading...</dv-loading>
        <div v-show="IsLoading==0" class="m-data-screen">

            <bigheader title="包装监控中心" />
            <indicators :indicators="indicatorsData" />
            <div class="content">
                <div class="flex-col" style="flex: 7;padding-right:0">
                    <div class="content">
                        <div class="card-container">
                            <div class="normal-card">
                                <itemgroup7  />
                            </div>
                            <div class="normal-card">
                                <itemgroup1  />
                            </div>
                            <div class="normal-card">
                                <itemgroup2  />
                            </div>
                            <div class="normal-card">
                                <itemgroup3  />
                            </div>
                            <div class="normal-card">
                                <itemgroup4  />
                            </div>
                            <!-- <div class="normal-card">
                                <itemgroup5  />
                            </div> -->
                            <div class="normal-card">
                                <itemgroup6  />
                            </div>
                           
                        </div>
                    </div>
                </div>

                <div class="flex-col" style="flex: 3.5;">

                    <div class="root">
                        <alarm :orders="abnormalOrders" :maxVisible="9"  />
                    </div>
                </div>
            </div>


        </div>
        
    </FullScreenBorder>
</template>

<script setup>
import FullScreenBorder from './components/FullScreenBorder.vue'
import starBackground from '@/views/components/starBackground.vue'

import itemgroup1 from './components/Station1Card.vue'
import itemgroup2 from './components/StationsTable.vue'
import itemgroup3 from './components/itemgroup3.vue'
import itemgroup4 from './components/itemgroup4.vue'
import itemgroup5 from './components/itemgroup5.vue'
import itemgroup6 from './components/itemgroup6.vue'
import itemgroup7 from './components/PaperboardUtilizationRate.vue'
import alarm from './components/AbnormalOrders.vue'
import bigheader from './components/header.vue'
import indicators from './components/indicators.vue'

const { proxy } = getCurrentInstance()
proxy.signalr.start()
const SR = proxy.signalr.SR



onMounted(() => {
    setTimeout(() => {
        IsLoading.value = 0;
        Online()
    }, 999);
})


const IsLoading = ref(1)


//绑定OEE信息
const oeeData = reactive({
    runTime: '',//运行时间
    failureTime: "",//故障时间
    operatingRate: "",//OEE百分比
    okCount: 0,
    ngCount: 0,
    totalCount: 0
})


const indicatorsData = ref(buildIndicatorsData())

function buildIndicatorsData(data) {
    return [
        { label: '接收订单', value: 100 || '-' },
        { label: '已处理订单', value: 90 || '-' },
        { label: '异常订单', value: 1 || '-' },
        { label: '订单完成比例', value: '90%' || '-' },
    ]
}







//注册 signalr
function Online() {
    SR.invoke('Demo01Request', 1)
    SR.off('bigScreenDemo01Receive')
    SR.on("bigScreenDemo01Receive", (data) => {
        Object.assign(oeeData, data.oee)
        items.value = data.demoStationData
        //alarms.value = data.alarms
        indicatorsData.value = buildIndicatorsData(data.oee)
        //console.log('收到推送信息'  )
    })
    SR.onreconnected((connectionId) => {
        console.log('大屏断线重新连接成功' + connectionId)
        SR.invoke('Demo01Request', 1)
    })
    console.log('demo01大屏注册通信完成')
}





onMounted(() => {
    window.addEventListener('beforeunload', handleBeforeUnload);
    /* 页面挂载时调用signalr注册大屏上线 */
    
});

onUnmounted(() => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
});
//
function handleBeforeUnload(event) {
    // 这里可以执行你的清理或保存操作
    SR.invoke('Demo01Request', 0)
    // event.preventDefault(); // 注意：在某些浏览器中，如果你调用了 preventDefault，可能会显示一个对话框询问用户是否真的要离开。
    event.returnValue = ''; // Chrome 需要这个返回值来阻止对话框显示
}




// 各个工站/工位的信息，示例数据
const items = ref([
    // { id: 1, title: '项目 1', content: '这是项目1的内容' },

]);

const alarms = ref([
    { content: '1工位A1 - 温度超阈值', alarmTime: '2023-07-25 10:15', level: 'critical' },
            { content: '2工位B3 - 设备超时', alarmTime: '2023-07-25 10:10', level: 'warning' },
            { content: '3物料区 - 库存低', alarmTime: '2023-07-25 10:05', level: 'info' },
            { content: '4工位C5 - 传送带异常', alarmTime: '2023-07-25 10:00', level: 'warning' },
            // { content: '5质检区 - 合格率低', alarmTime: '2023-07-25 09:55', level: 'critical' },
            // { content: '6电源模块 - 电压波动', alarmTime: '2023-07-25 09:50', level: 'info' },
            // { content: '7工位D2 - 机械臂偏差', alarmTime: '2023-07-25 09:45', level: 'warning' },
            // { content: '8冷却系统 - 流量不足', alarmTime: '2023-07-25 09:40', level: 'critical' },
            // { content: '9仓储区 - 物料过期', alarmTime: '2023-07-25 09:35', level: 'info' },
            // { content: '10工位E7 - 传感器无响应', alarmTime: '2023-07-25 09:30', level: 'warning' },
            // { content: '11包装区 - 封箱不牢', alarmTime: '2023-07-25 09:25', level: 'info' } 
])

// 异常订单样例数据
const abnormalOrders = ref([
  {
    boxNumber: "BX20230801003",
    waybillNumber: "YD884567890125",
    ngInfo: "地址信息不完整",
    occurTime: "2023-08-12 08:40:05"
  },
  {
    boxNumber: "BX20230801004",
    waybillNumber: "YD884567890126",
    ngInfo: "重复扫码",
    occurTime: "2023-08-12 08:42:33"
  },
  {
    boxNumber: "BX20230801005",
    waybillNumber: "YD884567890127",
    ngInfo: "包装破损",
    occurTime: "2023-08-12 08:45:18"
  },
  {
    boxNumber: "BX20230801006",
    waybillNumber: "YD884567890128",
    ngInfo: "目的地错误",
    occurTime: "2023-08-12 08:50:42"
  },
  {
    boxNumber: "BX20230801007",
    waybillNumber: "YD884567890129",
    ngInfo: "体积异常",
    occurTime: "2023-08-12 08:55:27"
  },
]);


// 计算属性：将数据按每页6个进行分组
const carouselPages = computed(() => {
  
    const pages = [];
    for (let i = 0; i < items.value.length; i += 6) {
        pages.push(items.value.slice(i, i + 6));
    }
    return pages;
});







// pnpm install @dataview/datav-vue3  pnpm install @jiaminghi/data-view
//npm uninstall @jiaminghi/data-view pnpm uninstall @dataview/datav-vue3
</script>
<style lang="scss" scoped>
@use './index.scss';
</style>
<style lang='scss' scoped>

.card-container {
  display: grid;
  /* 三行两列布局，为大卡片预留空间 */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  gap: 16px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* 普通卡片 - 占据1x1网格 */
.normal-card {
  grid-column: span 1;
  grid-row: span 1;
}

/* 大卡片 - 占据1x2网格（跨两行） */
.large-card {
  grid-column: span 1;
  grid-row: span 2; /* 关键：让大卡片自然占据两行高度 */
}

/* 每个项目：占据1行1列的网格空间 */
.grid-item {
    grid-column: span 1;
    /* 占1列 */
    grid-row: span 1;
    /* 占1行（关键：强制每个项目只占1行高度） */
}







.table-container {
    width: 100%;
    overflow: hidden;
}

.el-table {
    border: none;
}

.el-table__body-wrapper {
    overflow: hidden;
    /* 隐藏滚动条 - Chrome、Safari 和 Opera */
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scrollbar-width: none;
    /* Firefox */
}

.el-table__body-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome、Safari 和 Opera */
}

/* 取消表格行悬停变色效果
--el-table-row-hover-bg-color:
*/
.el-table {
    --el-table-row-hover-bg-color: inherit !important;
    --el-table-border-color: inherit !important;
}

:deep(.rowclass) {
    background-color: #030409;
    color: white;
}

.subtitle {
    font-size: 2vw;
}



:deep(.dv-scroll-board .rows) {
    border-radius: 10px;
    overflow: hidden;
}

:deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item) {

    font-size: 1.5vw;
    color: #dbdad8;
}

// :deep(div[tag="alarm"] > .dv-scroll-board .rows .row-item>div:nth-child(1) ){
//     width: 100% !important;
// }

.background {
    background-color: #030409;
    color: white;

}


.content {
    display: flex;
    justify-content: space-between;
    flex: 1;
   
    box-sizing: border-box;
}

.flex-col {
    display: flex;
    flex: 1;
    padding: 20px;
    flex-direction: column;

    .content {
        display: flex;
        flex: 7.5;
    }

    .root {
        display: flex;
        flex: 2.5;
        
    }
}

/* 设置 div 为圆形并添加红色渐变背景 */
.blinking-circle {
    //   width: 100px;
    //   height: 100px;
    border-radius: 50%;
    /* 红色渐变背景 */
    background: radial-gradient(circle at center, #ff0000, #800000);
    /* 应用闪烁动画 */
    animation: blink 1s infinite alternate;
}

/* 定义闪烁动画 */
@keyframes blink {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

// :deep(.card-title){
//     font-size: 1.1vmin !important;
// }
// :deep(span.value){
//     font-size: 1.0vmin !important;
// }
</style>
